<template>
  <div class="rich-table">
    <rich-table :data="tableData" :fields="fields" />
  </div>
</template>

<script name="RichTable" lang="ts" setup>
import type { TableFields } from '@/components/RichTable/types';

// 表格数据
const tableData = [
  {
    date: '2016-05-03',
    name: ['Tom', 'Lily'],
    address: 'https://api.miaomc.cn/image/get'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'https://api.miaomc.cn/image/get'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'https://api.miaomc.cn/image/get'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'https://api.miaomc.cn/image/get'
  }
];

// 表格字段
const fields: TableFields = [
  {
    type: 'text',
    label: '日期',
    prop: 'date',
    sortable: true
  },
  {
    type: 'tag',
    label: '姓名',
    prop: 'name'
  },
  {
    type: 'link',
    label: '地址',
    prop: 'address'
  }
];
</script>
